<template>
  <div style="margin-left: 20%; width: 80%; height: 100%">
    <div style="display: flex;flex-wrap: wrap;padding: 1%">
      <!-- <div class="box" v-for="i of 9" :key="i">{{ i }}</div> -->
      <!-- <div class="box">1</div> -->
       <!-- 左右移动 -->
      <div class="box" style="display:flex;justify-content: center;flex-direction: column">
        <div class="box-title">左右移动</div>
        <div style="position:absolute;left: 80%;font-size: 12px;">移动到这里</div>
        <!-- 左右1 -->
        <div class="movelr" style="width: 40px;height:40px;background-color: red;border: 1px solid cyan;"></div>
        <!-- 左右2 -->
        <div class="movelr2" style="width: 40px;height:40px;background-color: blue;border: 1px solid cyan;"></div>
      </div>
      <!-- 上下移动 -->
      <div class="box" style="display:flex;justify-content: center;">
        <div class="box-title">上下移动</div>
        <div class="movetb" style="width: 40px;height:40px;background-color: green;border: 1px solid cyan;"></div>
      </div>
       <!-- 左上到右下移动 -->
       <div class="box" style="">
        <div class="box-title">左上到右下移动</div>
        <div class="moveltrb" style="width: 40px;height:40px;background-color: blue;border: 1px solid cyan;"></div>
      </div>
      <!-- 旋转 -->
      <div class="box" style="display: flex;align-items: center;justify-content: center;">
        <div class="box-title">旋转</div>
        <div class="movecircle" style="display: flex;">
          <div style="margin-right:20px;width: 40px;height:40px;background-color: yellow;border: 1px solid cyan;"></div>
          <div style="width: 40px;height:40px;background-color: red;border: 1px solid cyan;"></div>
          <div style="margin-left:20px;width: 40px;height:40px;background-color: yellow;border: 2px solid red;"></div>
          <div style="width: 40px;height:40px;background-color: yellow;border: 1px solid cyan;"></div>
        </div>
      </div>
      <!-- 多次动画 -->
      <div class="box" style="">
        <div class="box-title">多次动画</div>
        <div class="movemore" style="width: 40px;height:40px;background-color: blue;border: 1px solid cyan;"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
  mounted() {},
  watch: {},
};
</script>

<style scoped>
.box {
  position: relative;
  padding: 6px;
  width: 30%;
  height: 30vh;
  border: 1px solid rgb(93, 188, 235);
}

.box-title {
  position: absolute;
  left: 5px;
  top: 5px;
  font-size: 14px;
  color: #fff;
}

/* 左右来回 */
@keyframes moveLeftToRight {
  /* 起始状态 */
  0% {
    margin-left: 0;
  } 
  /* 中间状态 */
  50% {
    margin-left: 80%;
  }
  /* 结束状态 */
  100% {
    margin-left: 0;
  }
}

/* 绑定动画 */
.movelr {
  animation: moveLeftToRight 4s infinite;
}

/* 左右移动2 */
@keyframes moveLeftToRight2 {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(300px);
  }
  100% {
    transform: translateX(0px);
  }
}

.movelr2 {
  animation: moveLeftToRight2 4s infinite;
}

/* 上下来回 */
@keyframes moveTopToBottom {
  0% {
    margin-top: 0;
  }
  50% {
    margin-top: 25vh;
  }
  100% {
    margin-top: 0;
  }
}

/* 绑定动画 */
.movetb {
  animation: moveTopToBottom 6s infinite;
}

/* 左上到右下 */
@keyframes moveLTRB {
  0% {
    margin-left: 0;
    margin-top: 0;
  }
  50% {
    margin-left: 90%;
    margin-top: 25vh;
  }
  100% {
    margin-left: 0;
    margin-top: 0;
  }
}

/* 绑定动画 */
.moveltrb {
  animation: moveLTRB 2s infinite;
}

/* 旋转 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 绑定动画 */
.movecircle {
  animation: rotate 4s infinite;
}

/* 多次运动 */
@keyframes moves {
  0% {
    background-color: red;
    margin-left: 0;
    border-radius: 20px;
    border: 2px solid rgb(4, 0, 255);
  } 
  25% {
    background-color: rgb(221, 255, 0);
    margin-top: 10vh;
    transform: rotate(180deg);
    border: 4px solid rgb(255, 0, 234);
  }
  50% {
    background-color: rgb(0, 255, 68);
    margin-left: 80%;
    transform: rotate(900deg);
    border-radius: 0;
    border: 6px solid red;
  }
  75% {
    background-color: rgb(0, 242, 255);
    margin-top: 20vh;
    margin-left: 20%;
    transform: rotate(270deg);
    border: 4px solid rgb(255, 0, 0);
  }
  100% {
    background-color: rgb(34, 0, 255);
    transform: rotate(90deg);
    border-radius: 20px;
    border: 2px solid rgb(0, 255, 30);
  }
}

/* 绑定动画 */
.movemore {
  animation: moves 6s infinite;

}
</style>